import React,{Component} from 'react';
import './Test.css';

var i=1;
const myStyle = {
    fontSize:20,
    color:'coral',
    padding:15
}
function getStyle(style) {
    if(style){
        return <h3 style={style}>fontSize 20px</h3>
    }
    return <h1>Hello, Stranger.</h1>;
}

function ListItem(props) {
    console.log('props:',props)
    return (
        <li >{props.index}.{props.value}<button onClick={props.delete.bind(this,props.index)}>×</button></li>
    )
}

//数组操作组件
class NumberList extends Component{
    constructor(props){
        super(props);
        this.state = {
            arr:[],
        }

        this.handleClick = this.handleClick.bind(this)
    }
    componentDidMount(){
        this.setState({
            arr:['吃饭','睡觉','打豆豆']
        })
        console.log('after mount '+this.state.arr)
    }
    handleClick(index){
        console.log('clicked '+index+' li')
        let data = this.state.arr;
        data.splice(index,1)
        this.setState({
            arr:data
        })
        console.log('after clicked '+this.state.arr)
    }

    render(){
        let arr = this.state.arr;
        console.log('rendering '+this.state.arr)
        let numbers = arr.map((item,index)=>
            (<ListItem value={item} key={index} delete={this.handleClick} index={index}/>)
        )
        return (<ul>{numbers}</ul>)
    }
}

// 表单组件
class Form extends Component{
    constructor(props){
        super(props);
        this.state = {
            formData:{
                id:this.props.uid,
                name:'',
                age:'',
                gender:'',
                isGoing:true,
                desc:'',
                avatar:'',
            }
        }
        this.change = this.change.bind(this);
        this.submit = this.submit.bind(this);
        this.file = this.file.bind(this);
        this.handleChangeByName = this.handleChangeByName.bind(this);
        this.fileInput = React.createRef();
    }

    change(key,e){
        let data = this.state.formData;
        data[key] = e.target.value.toUpperCase()
        this.setState({
            formData:data
        })
    }

    handleChangeByName(e){
        const target = e.target;
        const name = target.name;
        const value = target.type==='checkbox'?target.checked:target.value;//根据input类型判断
        let data = this.state.formData;
        data[name] = value;
        this.setState({
            formData:data
        })
    }

    submit(e){
        console.log(this.state.formData)
        e.preventDefault();
    }

    file(e){
        console.log('files:',this.fileInput.current.files)
        let data = this.state.formData;
        data['avatar'] = this.fileInput.current.files[0];
        this.setState({
            formData:data
        })
        e.preventDefault();
    }

    render(){
        return (
            <div>
                <form onSubmit={this.submit}>
                    Name:<input type='text' value={this.state.formData.name} onChange={this.change.bind(this,'name')}/><br/>
                    Age:<input type='number' value={this.state.formData.age} onChange={this.change.bind(this,'age')}/><br/>
                    Gender:<select value={this.state.formData.gender} onChange={this.change.bind(this,'gender')}>
                            <option>-请选择-</option>
                            <option value='0'>男</option>
                            <option value='1'>女</option>
                        </select><br/>
                    Going:<input type='checkbox' name='isGoing' checked={this.state.formData.isGoing} onChange={this.handleChangeByName}/><br/>
                    Avatar:<input type='file' ref={this.fileInput} onChange={this.file.bind(this)}/><br/>
                    Desc:<textarea value={this.state.formData.desc} onChange={this.change.bind(this,'desc')} /><br/>

                    <input type='submit' value='Submit'/>
                </form>
            </div>
        )
    }

}

/**
 * 状态提升 烧开水组件
 */
const scaleHash = {
    c:'Celsius',
    f:'Fahrenheit'
}
//华氏度转摄氏度
function toCelsius(fahrenheit) {
    return (fahrenheit-32)*5/9;
}
//摄氏度转华氏度
function toFahrenheit(celsius) {
    return (celsius*9/5)+32;
}
//输入温度数据处理
function tryConvert(temperature,convert){
    const input = parseInt(temperature,10);
    if(Number.isNaN(input)){
        return '';
    }
    const output  = convert(temperature);
    return Math.round(output*1000)/1000;
}

function BoilingVerdict(props) {
    if (props.celsius>=100&&props.scale==='c') {
        return <p>水烧开了</p>
    }else if (props.celsius>=212&&props.scale==='f') {
        return <p>水烧开了</p>
    }else{
        return <p>水没烧开</p>
    }
}

class TemperatureInput extends Component{
    constructor(props){
        super(props);

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e){
        //触发父组件方法
        this.props.onTemperatureChange(this.props.scale,e.target.value);
    }

    render(){
        const scale = this.props.scale;
        const temperature = this.props.temperature;

        return (
            <div>
                <fieldset>
                    <legend>Enter Temperature in {scaleHash[scale]}</legend>
                    <input type='number' value={temperature} onChange={this.handleChange} placeholder='Enter...'/>
                </fieldset>
            </div>
        )
    }
}

//温度计算显示,并判断水开了没
class Calculator extends Component{
    constructor(props){
        super(props);
        this.state = {
            scale:'',
            temperature:'',
        }
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(scale,temperature){
        this.setState({
            scale:scale,
            temperature:temperature,
        })
    }

    render(){
        const scale = this.state.scale;
        const temperature = this.state.temperature;
        //温度转换
        const celsius = scale === 'c' ? temperature:tryConvert(temperature,toCelsius);
        const fahrenheit = scale === 'f' ? temperature:tryConvert(temperature,toFahrenheit);

        return(
            <div>
                <TemperatureInput scale='c' temperature={celsius} onTemperatureChange={this.handleInputChange}/>
                <TemperatureInput scale='f' temperature={fahrenheit} onTemperatureChange={this.handleInputChange}/>

                <BoilingVerdict celsius={temperature} scale={scale}/>
            </div>
        )
    }
}

//组合VS继承
function Top() {
    return <p>Top</p>
}
function Middle() {
    return <p>Middle</p>
}
function SplitPane(props) {
    return(
        <div className="SplitPane">
            <div className="SplitPane-top">{props.top}</div>
            <div className="SplitPane-middle">{props.middle}</div>
            <div className="SplitPane-bottom">{props.children}</div>
        </div>
    )
}
function FancyBorder(props) {
    return (
        <div className={'FancyBorder-'+props.color}>
            {props.children}
        </div>
    )
}
function Dailog(props) {
    return (
        <FancyBorder color='coral'>
            <h2>{props.title}</h2>
            <p>{props.content}</p>
            {props.children}
        </FancyBorder>
    )
}


class Test extends Component{
    constructor(props){
        super(props);
        this.state = {
            loginToken:''
        }
        this.handleSignUp = this.handleSignUp.bind(this)
    }
    handleSignUp(){
        alert(`Welcome aborad captain,${this.state.loginToken}`)
    }
    handleChange(e){
        this.setState({
            loginToken:e.target.value
        })
    }
    render(){
        const uid = 9527;

        return (
            <div className="Test" style={myStyle}>
                <header className="App-header">
                    <h1 className="App-title">1+1={1+1}</h1>
                </header>
                <p className="App-intro">
                    <span>i==1?[conditional (三元运算)]  {i===1?'YES':'NO'}!</span>
                </p>
                <hr/>
                <div>arr map展开：<NumberList/></div>
                {/*表单*/}
                <hr/>
                <Form uid={uid}/>
                {/*烧开水*/}
                <hr/>
                <Calculator/>
                <hr/>
                <SplitPane top={<Top/>} middle={<Middle/>}>
                    <Dailog title='Mars Exploration Program' content='How should we refer to you?'>
                        <input value={this.state.loginToken} onChange={this.handleChange.bind(this)}/><input type='button' value='Send Me Up!' onClick={this.handleSignUp}/>
                    </Dailog>
                </SplitPane>
            </div>
        )
        // return getStyle(myStyle);
    }
}
// getStyle(myStyle)
export default Test;
